<template>
	<div class="brokenchart">
		<div class="title">
			<img :src="comstatic+'/homeImg/myd.png'" class="img" />
			<div class="leij">今日累积用电</div>
			<div class="total">{{ total.toFixed(0) }}<span>&nbsp;&nbsp;kWh</span></div>
			<div class="footer-pan"></div>
		</div>

		<div class="chart" id="sdfds">
			<div id="redd-libs-bottom"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import request from '@/common/request.js';
	import $config from '@/common/config.js';
	import moment from "moment";
	let domId1 = 'redd-libs-bottom';
	export default {
		data() {
			return {
				total: 0,
				comstatic: $config.comstatic,
				option: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#57617B'
							},
						},
						// formatter: '上月{b0}日: {c0}<br />本月{b1}日: {c1}'
					},
					grid: {
						height: '70%',
						left: '3%',
						right: '4%',
						bottom: '8%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false,
							lineStyle: {
								color: '#fff',
							},
						},
						axisTick: {
							show: false,
						},
						data: [0, 0, 0, 0, 0],
					}, ],
					yAxis: [{
						type: 'value',
						// name: "单位（%）",
						name: '',
						axisTick: {
							show: false,
						},
						axisLine: {
							textStyle: {
								color: '#fff',
							},
							lineStyle: {
								color: 'rgba(255,255,255,.3)',
							},
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 12,
								color: '#fff',
							},
						},
						splitLine: {
							lineStyle: {
								color: '#57617B',
							},
						},
					}, ],
					series: [{
						name: '本日用电',
						type: 'line',
						smooth: true,
						symbol: 'circle',
						symbolSize: 5,
						showSymbol: false,
						lineStyle: {
							normal: {
								width: 1,
							},
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: 'rgba(0, 136, 212, 0.3)',
										},
										{
											offset: 0.8,
											color: 'rgba(0, 136, 212, 0)',
										},
									],
									false
								),
								shadowColor: 'rgba(0, 0, 0, 0.1)',
								shadowBlur: 10,
							},
						},
						itemStyle: {
							normal: {
								color: 'rgb(76, 208, 199)',
								borderColor: 'rgba(0,136,212,0.2)',
								borderWidth: 12,
							},
						},
						data: [0, 0, 0, 0, 0],
					}, ]
				}
			}
		},
		methods: {
			loadDataFn() {
				let that = this
				let params = {
					timeType: "month",
					startTime: moment().year(moment().year() - 1).startOf("year").format("YYYY-MM-DD"),
					endTime: moment().year(moment().year() - 1).endOf("year").format("YYYY-MM-DD"),
					startTime2: moment().startOf('year').format('YYYY-MM-DD'),
					endTime2: moment().endOf('year').format('YYYY-MM-DD'),
					configId: 'power_all',
					projectId: $config.pcode,
				}
				request.postRaw('/jeecgboot/device/data/sameDiff', {
					"content-type": "application/json"
				}, params).then(res => {
					console.log(res, '------res-----')
					let range = res.result.mdRange[0];
					if (res.result.mdRange[0].length < res.result.mdRange[1].length) {
						range = res.result.mdRange[1];
					}
					that.option.xAxis[0].data = range.map((item) => {
						return item.substring(5);
					});
					that.option.series[0].data = res.result.mdData.map((level1) => {
						let delData = level1
							.slice(0, level1.length / 2)
							.slice(-1)[0]
							?.power * 0.5703 / 1000

						//取最后一个 计算过的数据
						return !level1.slice(0, level1.length / 2).slice(-1)[0] ?
							0 :
							that.upFixed(delData, 4)
					});



					that.option.series[1].data = res.result.mdData.map((level1) => {
						let delData1 = level1.slice(-1)[0]?.power * 0.5703 / 1000
						//取最后一个 计算过的数据
						return !level1.slice(-1)[0] ? 0 : that.upFixed(delData1, 4);
					});
					console.log(that.option.series[1].data, '---- optionCarbonValue.series[1].data---')
					that.option.series[1].data.forEach((v) => {
						if (v > 0) that.total -= -v;
					});
				})
			},


			upFixed(num, fix) {
				// num为原数字，fix是保留的小数位数
				let result = '0'
				if (Number(num) && fix > 0) { // 简单的做个判断
					fix = +fix || 2
					num = num + ''
					if (/e/.test(num)) { // 如果是包含e字符的数字直接返回
						result = num
					} else if (!/\./.test(num)) { // 如果没有小数点
						result = num + `.${Array(fix + 1).join('0')}`
					} else { // 如果有小数点
						num = num + `${Array(fix + 1).join('0')}`
						let reg = new RegExp(`-?\\d*\\.\\d{0,${fix}}`)
						let floorStr = reg.exec(num)[0]
						if (+floorStr >= +num) {
							result = floorStr
						} else {
							let floorNumber = +floorStr + +`0.${Array(fix).join('0')}1`
							let point = /\./.test(floorNumber + '') ? '' : '.'
							let floorStr2 = floorNumber + point + `${Array(fix + 1).join('0')}`
							result = reg.exec(floorStr2)[0]
						}
					}
				}
				return result
			}
		},
		mounted() {
			this.$nextTick(() => {
				let chartDom = document.getElementById(domId1);
				let echartInstance = echarts.init(chartDom);
				// console.log('chartDom==>>>', chartDom)
				// console.log('echartInstance==>>>', echartInstance)
				echartInstance.setOption(this.option);
			});
		}
	}
</script>

<style lang="less" scoped>
	.brokenchart {
		// box-sizing: border-box;
		// padding-top: 10%;
		// background-color: #fff;
		// justify-content: center;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 20px;

		.title {
			width: 90%;
			// height: 20%;
			padding: 10px 0;
			background: linear-gradient(90deg, rgba(16, 55, 95) 0%, rgba(18, 34, 56) 100%);
			// border-radius: 2px;
			// opacity: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			&::before {
				position: absolute;
				top: -2px;
				left: -2px;
				width: 10px;
				height: 10px;
				border-top: 2px solid rgba(255, 255, 255, 0.3);
				border-left: 2px solid rgba(255, 255, 255, 0.3);
				content: '';
			}

			&::after {
				position: absolute;
				top: -2px;
				right: -2px;
				width: 10px;
				height: 10px;
				border-top: 2px solid rgba(255, 255, 255, 0.3);
				border-right: 2px solid rgba(255, 255, 255, 0.3);
				content: '';
			}

			.footer-pan {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;

				&::before {
					position: absolute;
					bottom: -2px;
					left: -2px;
					width: 10px;
					height: 10px;
					border-bottom: 2px solid rgba(255, 255, 255, 0.3);
					border-left: 2px solid rgba(255, 255, 255, 0.3);
					content: '';
				}

				&::after {
					position: absolute;
					bottom: -2px;
					right: -2px;
					width: 10px;
					height: 10px;
					border-bottom: 2px solid rgba(255, 255, 255, 0.3);
					border-right: 2px solid rgba(255, 255, 255, 0.3);
					content: '';
				}
			}

			.img {
				// width: 30px;
				// height: 30px;
				// margin-right: 20px;
				width: 3vh;
				height: 3vh;
			}

			.leij {
				// color: #cfe8ff;
				// font-size: 16px;
				// font-weight: 500;
				// margin-right: 40px;
				display: flex;
				color: #cfe8ff;
				// font-size: 14px;
				font-size: 1.8vh;
				margin: 0 16px;
			}

			.total {
				// color: #fff;
				// font-size: 22px;
				font-size: 2.2vh;
				// margin-right: px;

				span {
					color: #fff;
					// font-size: 12px;
					font-size: 1.4vh;
					padding-left: 4px;
				}
			}
		}

		.chart {
			// height: calc(100% - 20px);
			height: 25vh;
			width: 100%;

			// background-color: pink;
			// flex:1;
			// #redd-libs-bottom {
			//   height: 100%;
			// }
			div {
				height: 100%;
			}
		}
	}
</style>
